<template>
	<view class="adfdsghdjsklzebf" v-if="showpage">
		<view class="close" @click.stop="showpage=false;">×</view>
		<view class="main">
			<view class="title">
				<view class="titlecon">
					<input type="text" v-model="ser.key" class="serkey" placeholder="输入名称快速查找项目" @input="changeFunc" />
					<button type="primary" size="mini" @click.stop="okclick()" class="btnmin">确定</button>
				</view>
			</view>
			<view class="m">
				<scroll-view :scroll-y="true" class="scroll">
					<view class="item" v-for="item in serlist" :key="item.id" @click.stop="checkClick(item)" :class="{'checked':item.checked}">
						{{item.trueName}}
					</view>
				</scroll-view>
				<scroll-view :scroll-y="true" class="scroll">
					<view class="item" v-for="item in checkeds" :key="item.id" @click.stop="checkClick(item)">
						{{item.trueName}}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import staffapi from '@/api/staffapi';
	export default {
		data(){
			return {
				showpage:false,
				ser:{key:''},
				list:[]
			}
		},
		computed:{
			serlist(){
				return this.list.filter(z=>z.trueName.includes(this.ser.key));
			},
			checkeds(){
				return this.list.filter(z=>z.checked);
			}
		},
		methods:{
			checkClick(item){
				item.checked=!item.checked;
				// this.$emit('ok',{id,name:trueName});
			},
			search(ids){
				staffapi.getlist().then((data)=>{
					this.list=data.map(z=>Object.assign(z,{checked:ids.includes(z.id)}));
				})
			},
			show(lists){
				lists=lists||[];
				this.search(lists);
				this.showpage=true;
			},
			okclick(){
				const ids=this.checkeds.map(z=>z.id);
				const names=this.checkeds.map(z=>z.trueName);
				this.$emit('ok',{ids,names});
				this.showpage=false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.adfdsghdjsklzebf{
		width:100vw;
		height:100vh;
		background:#00000060;
		position: fixed;
		top:0;
		left:0;
		display: grid;
		place-items: center center;
		&>.main {
			width: 80vw;
			height: 80vh;
			background-color: white;
		
			&>.title {
				height: 60px;
				line-height: 40px;
				background-color: #047879;
				display: grid;
				place-items: center center;
				.titlecon{
					display:grid;
					grid-template-columns: 1fr 70px;
					.btnmin{
						height:25px;
						box-sizing: border-box;
						line-height: 25px;
					}
				}
				
			}
		
			&>.m {
				height: calc(80vh - 60px);
				width: 80vw;
				display: flex;
				flex-direction: row;
				.scroll{
					flex:1;
					&:nth-child(1){
						border-right: 1px solid #ccc;
						box-shadow: 2px 0 6px 1px #ccc;
					}
				}
				.item {
					width: 90%;
					margin: auto;
					height: 40px;
					line-height: 40px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border-bottom: 1px dotted #ccc;
					&.checked{
						background-color:#00000020;
						border-radius: 5px;
						text-indent: 10px;
					}
				}
				
			}
		}
		.close {
			position: absolute;
			right: 10px;
			top: 10px;
			border: 1px solid black;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			text-align: center;
			line-height: 15px;
		}
		
		.serkey {
			background-color: white;
			text-indent: 10px;
			border-radius: 5px;
			::placeholder {
				color: #eee;
			}
		}
	}
</style>